<div class="layuimini-main">

    <div class="layui-form layuimini-form">
		
		
        <div class="layui-form-item">
            <label class="layui-form-label required">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="username" placeholder="请输入用户名" value="" class="layui-input">
				<!-- <input type="text" name="username" lay-verify="username" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input"> -->
            </div>
        </div>
		
		<div class="layui-form-item">
		    <label class="layui-form-label required">密码</label>
		    <div class="layui-input-block">
		        <input type="password" name="password" lay-verify="password" placeholder="请输入密码" value="" class="layui-input">
		    </div>
		</div>
		
		<!-- <div class="layui-form-item">
		    <label class="layui-form-label required">确认密码</label>
		    <div class="layui-input-block">
		        <input type="password" name="tpassword" lay-verify="tpassword" lay-reqtext="密码不能为空" placeholder="请确认密码" value="" class="layui-input">
		    </div>
		</div> -->
		
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>
        
        <div class="layui-form-item">
			<label class="layui-form-label">职业</label>

			<div class="layui-input-block">
				<div class="layui-input-inline" style="width:150px">
					<select name="classify" lay-filter="classify">
						<option value="" selected>请选择</option>
						<option value="作家">作家</option>
						<option value="歌手">歌手</option>
						<option value="生活家">生活家</option>
						<option value="演员">演员</option>
					</select>
					
				</div>
				
				<div class="layui-input-inline" style="width:230px">
					<label class="layui-form-label">评分</label>
					<div class="layui-input-block" >
						<input type="number" name="score" value="0" class="layui-input">
					</div>
				</div>
				
				<div class="layui-input-inline" style="width:230px">
					<label class="layui-form-label">财富</label>
					<div class="layui-input-block" >
						<input type="number" name="wealth" value="0" class="layui-input">
					</div>
				</div>
				
				<div class="layui-input-inline" style="width:230px">
				    <label class="layui-form-label">积分</label>
				    <div class="layui-input-block">
						<input type="number" name="integral" value="0" class="layui-input">
				    </div>
				</div>
				
			</div>
        </div>

		<div class="layui-form-item">
		    <label class="layui-form-label">头像</label>
		    <div class="layui-input-block">
				<button type="button" class="layui-btn" id="photo" name="photo">
				  <i class="layui-icon">&#xe67c;</i>上传图片
				</button>
		    </div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label required">地址</label>
		    <div class="layui-input-block" id="area-picker1">
				
				<!-- 省市区 -->
				<div class="layui-input-inline" style="width: 150px;">
		        	<select name="province" class="province-selector" lay-verify="required" data-value="" lay-filter="province-2">
		        		<option value="">请选择省</option>
		        	</select>
		        </div>
		        <div class="layui-input-inline" style="width: 150px;">
		        	<select name="city" class="city-selector" lay-verify="required" data-value="" lay-filter="city-2">
		        		<option value="">请选择市</option>
		        	</select>
		        </div>
		        <div class="layui-input-inline" style="width: 150px;">
		        	<select name="county" class="county-selector" lay-verify="required" data-value="" lay-filter="county-2">
		        		<option value="">请选择区</option>
		        	</select>
		        </div>
		    </div>
		</div>
		
		<div class="layui-form-item">
		    <label class="layui-form-label"></label>
		    <div class="layui-input-block">
		        <input type="text" name="address" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
		    </div>
		</div>
		
		<div class="layui-form-item">
		    <label class="layui-form-label required">内容</label>
		    <div class="layui-input-block">
		        <!-- TODO:富文本编辑器 -->
				<div id="editor"></div>	
			</div>
		</div>
		
		<div class="layui-form-item">
		    <label class="layui-form-label">签名</label>
		    <div class="layui-input-block">
		        <textarea placeholder="请输入签名" name="sign" class="layui-textarea"></textarea>
		    </div>
		</div>
		
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="state" lay-skin="switch" lay-filter="switchTest" title="状态">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layarea', 'wangEditor', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
			layarea = layui.layarea,
			wangEditor = layui.wangEditor,
			upload = layui.upload,
            $ = layui.$;
		
		//初始化上传
		upload.render({
			elem: '#photo' //绑定元素
			,url: 'http://localhost:8080/upload/' //上传接口
			,done: function(res){
			      //上传完毕回调
				  console.log(上传成功);
			}
			,error: function(){
			      //请求异常回调
				  console.log(上传异常);
			}
		});

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
		
		//初始化省市区
		layarea.render({
		    elem: '#area-picker1',
		    change: function (res) {
		        //选择结果
		        console.log(res);
		    }
		});

		//初始化富文本编辑器
		var editor = new wangEditor('#editor');
		editor.customConfig.uploadImgServer = 'http://localhost:8080/user/upload'; //后台图片上传地址
		editor.customConfig.uploadFileName = 'file';	//对应后台上传图片接口参数的名字
		editor.customConfig.pasteFilterStyle = false;
		editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
		editor.customConfig.uploadImgMaxLength = 5; //限制一次最多上传 5 张图片
		editor.customConfig.uploadImgHooks = {
		    // 上传超时
		    timeout: function (xhr, editor) {
		        layer.msg('上传超时！')
		    },
		    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
		    customInsert: function (insertImg, result, editor) {
		        console.log(result);
		        if (result.code == 1) {
		            var url = result.data.url;
		            url.forEach(function (e) {
		                insertImg(e);
		            })
		        } else {
		            layer.msg(result.msg);
		        }
		    }
		};
		editor.customConfig.customAlert = function (info) {
		    layer.msg(info);
		};
		editor.create(); //创建富文本编辑器
		
		
		
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
		
		
		
		//自定义验证规则
		form.verify({
			//第一种写法
		    username: function (value, item) {	//value控件值，item表单DOM对象
		        if (value.length == 0) {
		            return '用户名不能为空';
		        }
				if (!new RegExp("^[a-zA-Z0-9_-]{6,16}$").test(value)){	//用户名正则，6到16位（字母，数字，下划线，减号）
					return '用户名必须在6~16位';
				}
		    },
			//第二种写法
			password: [/^[a-zA-Z0-9_-]{6,16}$/, '密码必须在6~16位']
			//sex:[/^正则表达式$/, '弹出消息']
			
		});
		
		
		

        //监听提交
        form.on('submit(saveBtn)', function (data) {
			//获得表单数据
			var formData = data.field;
			console.log(formData);
			
			// //弹出信息让用户确认
			// var index = layer.alert(JSON.stringify(formData), {
			//     title: '确认提交信息',
			// 	//TODO:提交表单数据
				
			// 	console.log('提交')
				
			// }, function () {
			//     // 关闭弹出层
			//     layer.close(index);
			//     layer.close(parentIndex);
			// })
			
			//处理地址数据
			var address = "";
			if(formData.county!=""){  //区不为空字符串
				address = formData.county;   //430121
			}else{
				if(formData.city != ""){
					address = formData.city;
				}else{
					address = formData.province;
				}
			}
			
			if(address != ""){
				address += ',' + formData.address;    //430101,四方坪
			}
			
			//处理表单数据
			var postData = {
				'username': formData.username,
				'password': formData.password,
				'sex': formData.sex,
				'sign': formData.sign,
				'integral': formData.integral,
				'score': formData.score,
				'classify': formData.classify,
				'wealth': formData.wealth,
				'photo': formData.photo,
				'address': address,
				'content': editor.txt.html(),	//获得富文本编辑器中的内容
				'state':formData.state == 'on'?'1':'0'
			}
			console.log(postData);
			
			//通过ajax请求提交
			$.ajax({
				url : 'http://localhost:8080/user/add',
				type: 'post',
				data: postData,
				success: function(result){
					console.log(result);
					
					//刷新页面
					parent.table.reload('currentTableId');
					
					//关闭弹出层
					layer.close(index);
					
					
					
				},
				error:function(result){
					console.log(result);
				}
				
			});
			
            return false;
        });

    });
</script>